import React, { useState } from 'react'
import { StyleSheet, Text, TextInput, View } from 'react-native'

/* 
- autoComplete    自动填充内容    默认值 true
- autoFocus       自动获取焦点   （componentDidMount后获取） 默认值为false
- blurOnSubmit    提交时失焦      单行输入框默认值为 true，多行则为 false
  - 注意：对于多行输入框来说，如果将blurOnSubmit设为 true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
- caretHidden     隐藏光标        默认值false
- clearButtonMode 清除按钮        平台：ios
- defaultValue    输入框初始值
- cursorColor     设置光标颜色    平台：android
- disableFullscreenUI  值为false时,如果 手机横屏，操作系统可能会将这个 textinput 设置为全屏模式。
- editable        禁止编辑        默认值为 true。
- enablesReturnKeyAutomatically   true时，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为 false
- maxLength       最大数量
- multiline       多行文字         true时，文本框中可以输入多行文字。默认值为 false。
  - 注意安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: 'top'样式来使其居顶显示
- numberOfLines   设置输入框的行数。当 multiline 设置为 true 时使用它，可以占据对应的行数。 
- onBlur          失焦回调
- onChange        监听输入框是否变化   回调参数{ nativeEvent: { eventCount, target, text} }
- onChangeText    同上
- onFocus         获取焦点            回调参数为{ nativeEvent: { target } }
- onKeyPress      按键回调            回调函数的参数为{ nativeEvent: { key: keyValue } }
  - 其中keyValue即为被按下的键。会在 onChange 之前调用。注意：在 Android 上只有软键盘会触发此事件，物理键盘不会触发。
- onTextInput     光标在某位置输入文本时的回调   回调参数  nativeEvent: { text, previousText, range: { start, end } } }
- placeholder     占位符
- placeholderTextColor 占位符颜色
- returnKeyLabel  回车键内容       平台 安卓
- returnKeyType   回车键内容       平台ios
- secureTextEntry 遮盖文字        默认false  如果为 true，文本框会遮住之前输入的文字 multiline={true}时不可用
- textAlign       输入字段的对齐方式   left  center  right
- value           文本框内容



- keyboardType     弹出键盘类型
  - numeric        数字型
  - number-pad     数字型
  - decimal-pad    数字型
  - email-address  邮箱地址
  - phone-pad      输入电话号码
  Android:
  - visible-password 
  IOS:
  - ascii-capable
  - numbers-and-punctuation
  - name-phone-pad
  - twitter
  - web-search
  - url

  方法：
  clear()  清空输入框的内容。
  focus()  获取焦点
  blur()   失去焦点

*/


export default function TextInputDemo() {

  const [msg, setMsg] = useState('')

  const changeInp = (e: any) => {
    const { text } = e.nativeEvent
    setMsg(text)
  }

  const confirm = (e:any) => {
    console.log(e.nativeEvent.key); // 有bug
  }

  return (
    <View style={styles.root}>
      <View>
        <TextInput
          style={styles.input}
          value={msg}
          placeholder="请输入内容"
          cursorColor="#007acc"
          onChange={(e) => changeInp(e)}
          onKeyPress={(e)=> confirm(e)}
          // multiline={true}  // 如果设置了多行 那么点击换行就会触发 onKeyPress 事件
        />
      </View>


      <View><Text> msg: {msg} </Text></View>


    </View>

  )
}


const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#F0F0F0',
  },
  input: {
    width: '100%',
    // height: 56,
    backgroundColor: '#D0D0D0',
    fontSize: 24,
    color: '#333333',
    fontWeight: 'bold',
  },
});
